<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<!--这里是样式-->
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//这里是逻辑
//这里是逻辑 获取f到输入框里面的值哦 val ()获取到当前的值 是多少
// text() 设置或者返回所先元素的值
// html 设置或者返回所选元素的内容包括html 标记
// 替换里面的值
$(document).ready(function () {
     $('#btn1').click(function () {
        $("#test1").text("Hello world!");
     });
     $('#btn2').click(function () {
        $("#test2").html("Hello world!");
     });
     $('#btn3').click(function () {
        $("#test3").val("替换输入款里面的值");
     })
})
</script> 